<template>
  <div style="height: 100vh;background-image: url('/profile/background/背景.png');background-size: 100% 100%;background-repeat: no-repeat">
    <div style="width: 100%;height: 10%;background-image: url('/profile/background/大标题.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
      <div style="width: 35%;height: 100%;margin: auto">
        <div style="height: 70%"/>
        <div style="height: 30%;display: flex">
          <div class="tabs" :style="{color: fontColor[0], margin: 'auto'}" @click="tabClick1">全部设备</div>
          <div class="tabs" :style="{color: fontColor[1], margin: 'auto'}" @click="tabClick2">心电设备</div>
          <div class="tabs" :style="{color: fontColor[2], margin: 'auto'}" @click="tabClick3">血压设备</div>
          <div class="tabs" :style="{color: fontColor[3], margin: 'auto'}" @click="tabClick4">血氧设备</div>
        </div>
      </div>

      <div style="width: 30%;height: 100%;margin: auto;color: #FFFFFF;font-size: 2rem;display: flex">
        <div style="margin: auto">智</div>
        <div style="margin: auto">慧</div>
        <div style="margin: auto">健</div>
        <div style="margin: auto">康</div>
        <div style="margin: auto">远</div>
        <div style="margin: auto">程</div>
        <div style="margin: auto">监</div>
        <div style="margin: auto">测</div>
        <div style="margin: auto">平</div>
        <div style="margin: auto">台</div>
      </div>

      <div style="width: 35%;height: 100%;margin: auto">
        <div style="height: 70%"/>
        <div style="height: 30%;display: flex">
          <div class="tabs" :style="{color: fontColor[4], margin: 'auto'}" @click="tabClick5">立即搜索</div>
          <div class="tabs" :style="{color: fontColor[5], margin: 'auto'}" @click="tabClick6">布局设置</div>
          <div class="tabs" :style="{color: fontColor[6], margin: 'auto'}" @click="tabClick7">数据脱敏</div>
          <div class="tabs" :style="{color: fontColor[7], margin: 'auto'}" @click="tabClick8">数据统计</div>
        </div>
      </div>
    </div>
    <!--大标题，基本没多大问题-->

    <component :is="childComponent"></component>

  </div>
</template>

<script>
// https: //blog.csdn.net/zjh980622/article/details/132686828
import Statistics from "./statistics.vue"
import Alldevice from "./alldevice.vue"
import dataV from '@jiaminghi/data-view'
import Vue from "vue";

Vue.use(dataV)

export default {
  name: "Qiushimonitoring",
  data() {
    return {
      fontColor: [
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
      ],
      childComponent: null
    };
  },
  mounted() {
    this.tabClick1()
  },
  methods: {
    tabClick1() { // 全部设备
      this.fontColor = [
        'rgba(190, 205, 244, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
      ];
      this.childComponent = null
      this.childComponent = Alldevice

    },
    tabClick2() { // 心电设备
      this.fontColor = [
        'rgba(94, 104, 162, 1)', 'rgba(190, 205, 244, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
      ];
      this.childComponent = null

    },
    tabClick3() { // 血压设备
      this.fontColor = [
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(190, 205, 244, 1)', 'rgba(94, 104, 162, 1)',
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
      ];
      this.childComponent = null

    },
    tabClick4() { // 血氧设备
      this.fontColor = [
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(190, 205, 244, 1)',
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
      ];
      this.childComponent = null

    },
    tabClick5() { // 立即搜索
      this.fontColor = [
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
        'rgba(190, 205, 244, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
      ];
      this.childComponent = null

    },
    tabClick6() { // 布局设置
      this.fontColor = [
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
        'rgba(94, 104, 162, 1)', 'rgba(190, 205, 244, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
      ];
      this.childComponent = null

    },
    tabClick7() { // 数据脱敏
      this.fontColor = [
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(190, 205, 244, 1)', 'rgba(94, 104, 162, 1)',
      ];
      this.childComponent = null

    },
    tabClick8() { // 数据统计
      this.fontColor = [
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(190, 205, 244, 1)',
      ];
      this.childComponent = Statistics

    },
  }
}
</script>

<style lang="scss">

</style>
